﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">编辑表单</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">编辑表单</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<div class="row">
	<div class="col-lg-12">
		<section class="panel">
			<header class="panel-heading tab-bg-dark-navy-blue">
                   <ul class="nav nav-tabs">
                       <li class="active">
                           <a data-toggle="tab" href="#baseinfo"><i class="fa fa-cog"></i> <b>基本设置</b></a>
                       </li>
                       <li class="">
                           <a data-toggle="tab" href="#fields"><i class="fa fa-bars"></i> <b>字段管理</b></a>
                       </li>
                   </ul>
               </header>
               <div class="panel-body">
                   <div class="tab-content">
                       <div id="baseinfo" class="tab-pane active">
                           <form class="col s12" id="form1" th:object="${form}" th:action="@{/admin/forms/edit}" onsubmit="return validateForm();" method="post">
							<input name="id" id="id" type="hidden" th:value="*{id}" />
							<div class="form-group form-control-medium">
								<label for="formName">表单名：</label>
								<input id="formName" name="formName" type="text" class="form-control" th:value="*{formName}">
							</div>
							<div class="form-group form-control-medium">
	                            <label for="tableName">附加表名：</label>
	                            <input id="tableName" name="tableName" type="text" class="form-control" th:value="*{tableName}">
							</div>
							<div class="form-group">
								<label for="type">表单性质：</label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="type" id="type-yes" value="1" th:checked="${form.type} == 1">自定义表单
	                            </label>
	                            <label class="checkbox-inline">
	                                <input type="radio" name="type" id="type-no" value="0" th:checked="${form.type} == 0">系统表单
	                            </label>
							</div>
							<div class="form-btn-group-left">
				            	<button type="submit" class="btn btn-info">保存</button>
				            </div>
						</form>
                       </div>
                       <div id="fields" class="tab-pane">
                       	<div class="panel-body">
			                 <!-- <span class="pull-right badge badge-info">32</span> -->
			                 <button class="btn btn-primary btn-addon btn-sm" th:formid="${form.id}" th:onclick="javascript: toAdd(this.getAttribute('formid'))">
			                     <i class="fa fa-plus"></i>添加字段
			                 </button>
			            </div>
                       	<table class="table table-hover">
							<thead>
								<tr>
									<th style="width:50px;">选择</th>
									<th>表单提示文字</th>
									<th>数据字段名</th>
									<th>数据类型</th>
									<th style="width:300px;">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="field : ${fields}">
									<td><input type="checkbox" class="flat-grey list-child" th:value="${field.id}"/></td>
									<td th:text="${field.fieldText}"></td>
									<td th:text="${field.fieldName}"></td>
									<td th:text="${field.dataType}"></td>
									<td>
										<a th:href="@{/admin/field/toEdit(id=${field.id})}" class="btn btn-xs btn-success">编辑</a>
										<span>&nbsp;|&nbsp;</span>
										<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:fieldid="${field.id}" th:onclick="javascript: confrimRemove(this.getAttribute('fieldid'))">删除</a>
									</td>
								</tr>
							</tbody>
						</table>
                       </div>
                   </div>
               </div>
		</section>
	</div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
				<h4 class="modal-title">操作提示？</h4>
			</div>
			<div class="modal-body">
				<div class="alert alert-block alert-danger">
					<strong>注意!</strong> 字段删除后，如有调用则会报错且删除后不可恢复.
				</div>
				<h4 class="modal-title">您确定要删除该记录吗？</h4>
				<input type="hidden" id="cacheID" />
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
				<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>
<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
   <script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
   <!-- iCheck -->
   <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
   <script type="text/javascript">
    function validateForm(){
    	//console.log($("#content").val());
    	return true;
    }
    
    window.onload = function(){
		renderCheckBox();
	}
    
    function renderCheckBox(){
		$('input').on('ifChecked', function(event) {
		    $(this).parents('li').addClass("task-done");
		    console.log('ok');
		});
		$('input').on('ifUnchecked', function(event) {
		    $(this).parents('li').removeClass("task-done");
		    console.log('not');
		});
		
		$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
		    checkboxClass: 'icheckbox_flat-grey',
		    radioClass: 'iradio_flat-grey'
		});
	}
    
    function toAdd(fid){
		window.location.href = "/admin/field/toAdd?formId="+fid;	
	}
    
    function confrimRemove(id){
		$("#remove-dialog").modal();
		$("#cacheID").val(id);
	}
	
	function remove(){
		var currentID = $("#cacheID").val();
		window.location.href="/admin/field/delete?id="+currentID;
		$("#remove-dialog").modal('hide');
	}
   </script>
</body>
</html>
